<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt'%>
<style>
.img-choose{
cursor:pointer;
}
td{
border-style:solid;
border-width:1px;
border-color:#337AB7;
}
</style>
<div class="row" style="margin:100px 0px;">
	<!-- 图片上传区域的隐藏模块 -->
		<input id="imgBig" accept="image/*" type="file"  autocomplete="off"  onchange ="uploadBigImg()"/>
		<input id="imgSmall" accept="image/*" type="file"  autocomplete="off"  onchange ="uploadSmallImg()"/>
		
	<div>
			<form id="subIndexForm">
		<table class="table table-hover">
			<thead style="background-color:#337AB7;">
				<th>排序</th>
				<th>展示大图</th>
				<th>轮播小图</th>
				<th>影片</th>
			</thead>
			<tbody style="border-width:1px;border-style:solid;border-color:#337AB7;">
			<c:forEach items="${showIndexImages}" var="showIndexImage" varStatus="st">
				<tr>
					<td ><input  type="hidden"  name="id" value="${showIndexImage.id}">${showIndexImage.id}</td>
					<td>
						<div  data-toggle="tooltip" data-placement="right" title="推荐格式 1380X480">
							<img class="img-choose chooseBigImg" width="220px" height="76px" src="virtual_imgBig?pictureId=${showIndexImage.imagebig_url}" ></img>
							<input type="hidden" class="imagebig_url" name="imagebig_url" value="${showIndexImage.imagebig_url}">
						</div>
					</td>
					<td>
						<div  data-toggle="tooltip" data-placement="right" title="推荐格式135X75">
							<img class="img-choose chooseSmallImg" width="135px" height="75px" src="virtual_imgSmall?pictureId=${showIndexImage.imagesmall_url}"></img>
							<input type="hidden" class="imagesmall_url" name="imagesmall_url" value="${showIndexImage.imagesmall_url}">
						</div>
					</td>
					<td>
						<input id="showTvId" type="hidden" value="${showIndexImage.tv.id}">
						<select  id="tv_id" name="tv_id" class="selectpicker tv_id" data-style="btn-primary">
						<c:forEach items="${tvs}" var="tv" varStatus="st">
							<option value="${tv.id}">${tv.name}</option>
    					</c:forEach>
    					</select>
					</td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
		</form>
		<button id="btn-subIndexImage" class="btn btn-primary" data-toggle="tooltip" data-placement="right">提交</button>
	</div>
</div>
<script>
//隐藏图片选择框
$("#imgBig").hide();
$("#imgSmall").hide();
//初始化tv选择的值
$(function(){
	$(".tv_id").each(function(){
		$(this).val($(this).siblings().eq(0).val());
	});
});
var imgBigId;
var imgSmallId;
$(function () { $("[data-toggle='tooltip']").tooltip(); });
//上传大图的点击
$("body").on("click",".chooseBigImg",function(){
	var index = $(".chooseBigImg").index(this);
	imgBigId = index;
	$("#imgBig").trigger("click");
});
//上传大图的传输
function uploadBigImg(){
	var formData = new FormData();
	 formData.append("file", document.getElementById("imgBig").files[0]);  
	$.ajax({
		 url: "admin_uploadTvBigPicture",
        type: "POST",
        data: formData,
		contentType: false,
       processData: false,
       success: function (data) {
          $(".chooseBigImg").eq(imgBigId).attr("src","virtual_imgBig?pictureId="+data);
          $(".imagebig_url").eq(imgBigId).val(data);
       },
       error:function(data){
          
       }
	});
}
//上传小图的点击
$("body").on("click",".chooseSmallImg",function(){
	var index = $(".chooseSmallImg").index(this);
	imgSmallId = index;
	$("#imgSmall").trigger("click");
});
//上传小图的传输
function uploadSmallImg(){
	var formData = new FormData();
	 formData.append("file", document.getElementById("imgSmall").files[0]);  
	$.ajax({
		 url: "admin_uploadTvSmallPicture",
        type: "POST",
        data: formData,
		contentType: false,
       processData: false,
       success: function (data) {
          $(".chooseSmallImg").eq(imgSmallId).attr("src","virtual_imgSmall?pictureId="+data);
          $(".imagesmall_url").eq(imgSmallId).val(data);
       },
       error:function(data){
          
       }
	});
}
</script>
<script>
$("#btn-subIndexImage").click(function(){
	var showIndexImages  = JSON.parse($("#subIndexForm").serializeJson());
	var jsonData = JSON.stringify(showIndexImages);
	$.ajax({
		url:"admin_subIndexImage_subShowIndexImage",
		data:jsonData,
		type:"post",
		contentType : "application/json;charset=UTF-8",
		success:function(data){
			if(data=='SUCCESS'){
				alert("更新成功!");
			}
		}
	});
	
});
</script>
<script>
//form序列化，转成json的list
$.fn.serializeJson = function(){
    var jsonData1 = {};
    var serializeArray = this.serializeArray();
    // 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式
    $(serializeArray).each(function () {
        if (jsonData1[this.name]) {
            if ($.isArray(jsonData1[this.name])) {
                jsonData1[this.name].push(this.value);
            } else {
                jsonData1[this.name] = [jsonData1[this.name], this.value];
            }
        } else {
            jsonData1[this.name] = this.value;
        }
    });
    // 再转成[{"id": "12", "name": "aaa", "pwd":"pwd1"},{"id": "14", "name": "bb", "pwd":"pwd2"}]的形式
    var vCount = 0;
    // 计算json内部的数组最大长度
    for(var item in jsonData1){
        var tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length : 1;
        vCount = (tmp > vCount) ? tmp : vCount;
    }

    if(vCount > 1) {
        var jsonData2 = new Array();
        for(var i = 0; i < vCount; i++){
            var jsonObj = {};
            for(var item in jsonData1) {
                jsonObj[item] = jsonData1[item][i];
            }
            jsonData2.push(jsonObj);
        }
        return JSON.stringify(jsonData2);
    }else{
        return "[" + JSON.stringify(jsonData1) + "]";
    }
};
</script>